//set popup Status
var popupStatus=0;
var markerArray = new Array();
var lengthArray = 0; //arraylength
var edit = 1;

$(document).ready(function(){

// function adds a marker, makes draggable and implements drag stop fn to update the array of markers
function addmarker(ident, x, y, icon, iwidth, iheight) {
		var style = (' style="position:absolute; left:'+ x +'px;top:'+ y +'px;" ');
		var im = ('<img id="'+ident+'" class="mark" src="' + icon + '" width="'+iwidth+'" height="'+iheight+'"'+ style +' />');
		//$('#side_panel').append('<p id="' +ident+ '">'+ident+' ' + x +', '+ y + '<p/>');
		$('#map_canvas').append(im);
} //fn


// set of popup functions

function loadPopup(){  
 //loads popup only if it is disabled 
 if(popupStatus==0){  
 $("#backgroundPopup").css({"opacity": "0.7"});  
 $("#backgroundPopup").fadeIn("slow");  
 $("#popupContact").fadeIn("slow");  
 popupStatus = 1;  
 }  //if
}  //fn

function formPopup(n){  
 var imString = '<img src="'+ markerArray[n][5]+ '" width="' + markerArray[n][6] + '" height="' + markerArray[n][7] + '"/>';
 var xclose = '<a id="popupContactClose">x</a>';
 $("#popupTitle").html(markerArray[n][3] + xclose);
 //var textarea = JSON.stringify(markerArray[n][4]);
 //console.log('textis: '+markerArray[n][4]);
 $("#contactArea").html(imString + markerArray[n][4]); 
 //$("#contactArea").html(imString + textarea);
 //document.write(markerArray[n][4]);
 $("#linkBar").html('<a href="javascript:newWindow(&quot;' + markerArray[n][8] + '&quot;)">More &rsaquo;&rsaquo;</a>'); 
}  //fn

 //disabling popup  
 function disablePopup(){  
 //disables popup only if it is enabled  
 if(popupStatus==1){  
  $("#backgroundPopup").fadeOut("slow");  
 $("#popupContact").fadeOut("slow");  
 popupStatus = 0;  
	 }  //if
 }  //fn

//centering popup  
function centerPopup(){  
 //request data for centering  
	var windowWidth = document.documentElement.clientWidth;  
	var windowHeight = document.documentElement.clientHeight;  
	var popupHeight = $("#popupContact").height();  
	var popupWidth = $("#popupContact").width();  
 //centering  
	 $("#popupContact").css({"position": "absolute", "top": windowHeight/2-popupHeight/2, "left": windowWidth/2-popupWidth/2  });  
//only need force for IE6  
 
  $("#backgroundPopup").css({ "height": windowHeight });  
 }  //fn 

//positioning popup  
function positionPopup(t,l){  
 	//positioning  
	 $("#popupContact").css({"position": "absolute", "top": t, "left": l });  
 }  //fn
 
// gets json file with marker information and passes to an array
	var bg_image = myobj.background['fname'];
	var bg_width = myobj.bg_width['width']+'px';
	var bg_height = myobj.bg_height['height']+'px';
	var icon_image = myobj.markerIcon['fname'];
	var icon_width = myobj.iwidth['width']+'px';
	var icon_height = myobj.iheight['height']+'px';
	//var bg_image_string = "url('upload/stainedwindow1.jpg')";
	var bg_image_string = "url("+bg_image+")";
	var page_title = myobj.title.pagetitle;
	$("#header").html("<h1>" + page_title + "</h1>"); 
		$("#map_canvas").css({"background-image":bg_image_string});  
		$("#map_canvas").css({"height":bg_height});
		$("#container").css({"height":bg_height});
		$("#header").css({"width":bg_width});
		$("#nav").css({"width":bg_width});
		$("#map_canvas").css({"width":bg_width});
		$("#container").css({"width":bg_width});
		$("#footer").css({"width":bg_width});

	  $.each(myobj.markers.marker, function(i, item) { 
				var ident="mark"+i;
				var posx = item.posx;
				var posy = item.posy;
				//var icon = item.icon;
				//var iwidth = item.iwidth;
				//var iheight = item.iheight;
				var title = item.title;
				var txt = item.txt;
				var pic = item.pic;
				var width = item.width;
				var height = item.height;
				var lnk = item.lnk;
				markerPoint = new Array(ident, posx, posy, title, txt, pic, width, height, lnk); //create marker element for array
				lengthArray = markerArray.push(markerPoint);				//push onto array
				addmarker(ident, posx, posy, icon_image, icon_width, icon_height);
		}); //.each

//Activate Popup (display mode)
	$('.mark').bind('click',function(ev){
		var id = $(this).attr("id");
		var n = id.slice(4);
		var position = $(this).position();
		var l = position.left;
		var t = position.top ;
		//centering with css 
		formPopup(n);
		centerPopup(); 
		positionPopup(200,300);
		//load popup  
		loadPopup();  
	 }); //bind

//CLOSING POPUP  event handlers
 
   //Click the x event!  
   $("#popupTitle").click(function(){  //was #popupContactClose
   disablePopup();  
   });  

   //Click out event!  
	$("#backgroundPopup").click(function(){  
		disablePopup();  
	});  
   
		
//  }); // data //get removed when no httpxmlrequest
}); //document ready